<template>
  <div>
    <van-nav-bar
        title="eol写入申请详情"
        left-text="返回"
        left-arrow
        @click-left="routerBackMixin"
    />
    <div id="WritingApplicationDetail">
      <div class="WritingApplicationDetail-top">
        <div class="top-item rowSS">
          <h4>单元控制类型</h4>
          <h5>{{vehicleIniApplyData.ecuModel}}</h5>
        </div>
        <div class="top-item rowSS">
          <h4>VAN码</h4>
          <h5>{{vehicleIniApplyData.vanNumber}}</h5>
        </div>
        <div class="top-item rowSS">
          <h4>申请人</h4>
          <h5>{{vehicleIniApplyData.applicantUserName}}</h5>
        </div>
        <div class="top-item rowSS">
          <h4>服务站</h4>
          <h5>{{vehicleIniApplyData.applicantStation}}</h5>
        </div>
        <div class="top-item rowSS">
          <h4>申请时间</h4>
          <h5>{{vehicleIniApplyData.ctime}}</h5>
        </div>
        <div class="top-item rowSS">
          <h4>备注</h4>
          <h5>{{vehicleIniApplyData.remark||'-'}}</h5>
        </div>
      </div>
      <!--图片显示-->
      <div class="image-container">
        <h4 class="mt-2 mb-1">图片</h4>
        <div class="rowSS flex-wrap">
          <van-image
              @click.native="getLargeImg(index)"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
              v-for="(item,index) in vehicleIniApplyData.photos" :key="index"
              :src="item" class="tp-container mr-1 mb-1"
          />
        </div>
      </div>
      <!--eol详情-->
      <div class="columnCC mt-2 mb-2">
        <h4 class="font-weight ">审批详情</h4>
      </div>
      <div class="rowSC inputItem border-top">
        <h4 class="widthPx-100 ">审批状态</h4>
        <div
            v-if="!isSHApprove"
            @click="showPicker=true"
            class="d-inline-block all-select-btn">
          <span class="widthPx-80">{{packingValue||'请选择'}}</span>
          <svg-icon  icon-class="btn-positon-icon" />
        </div>
        <div v-else class="d-inline-block all-select-btn">
          <span class="widthPx-80">{{packingValue}}</span>
        </div>
      </div>
      <van-popup v-model="showPicker" position="bottom" :overlay="false">
        <van-picker
            value="审核通过"
            title="选择"
            show-toolbar
            :columns="columns"
            :default-index="defaultChooseIndex"
            value-key="label"
            @confirm="onConfirm"
            @cancel="showPicker=false"
        />
      </van-popup>
      <!--拒绝原因 选择拒绝后显示-->
      <div class="border-bottom columnCS mt-1 mb" v-if="vehicleIniApplyData.approvalStatus===-1">
        <h4 class="widthPx-100 mb-1">拒绝原因</h4>
        <van-field class="widthPC-100" type="textarea"  v-model="vehicleIniApplyData.refuseReason"  label="" />
      </div>
      <!--刷新次数-->
      <div v-if="!isSHApprove" class="rowSC inputItem" @click="chooseSxB">
        <h4 class="widthPx-100">刷写包</h4>
        <div class="widthPx-250 line-h-sm text-wrap-force">{{vehicleIniApplyData.eolFileName||'请选择刷写包'}}</div>
      </div>
      <div v-else class="rowSC inputItem">
        <h4 class="widthPx-100 ">刷写包</h4>
        <div>{{vehicleIniApplyData.eolFileName||'-'}}</div>
      </div>
      <div class="rowSC inputItem">
        <h4 class="widthPx-100 ">刷写次数</h4>
        <van-stepper class="widthPx-100" v-if="!isSHApprove" v-model="vehicleIniApplyData.approvalRewriteTimes"/>
        <div class="widthPx-80" v-else>{{vehicleIniApplyData.approvalRewriteTimes||'-'}}</div>
      </div>
      <!--刷新次数-->
      <div class="rowSC inputItem" @click="chooseDateShow=true">
        <h4 class="widthPx-100">有效期</h4>
        <span class="widthPx-140 mr-1">{{vehicleIniApplyData.approvalValidDate||'请选择有效期'}}</span>
      </div>
      <van-popup v-model="chooseDateShow" position="bottom" :overlay="false">
        <van-datetime-picker
            v-model="vehicleIniApplyData.approvalValidDate"
            type="datetime"
            @cancel="chooseDateShow=false"
            @confirm="onChooseDateConfirm"
            title="选择完整时间"
            :min-date="minDate"
        />
      </van-popup>
      <!--确定提交按钮-->
      <van-button class="mt-4 mb-4" :disabled="isSHApprove" style="background-color: #5169B1;color: #fff"  size="large"  @click="btnConfirm">确定</van-button>
      <!--刷写包弹框-->
      <van-overlay :show="modalIsShow"  class="columnCC">
        <div class="vanOverlayModal">
          <!--底部标题-->
          <div class="top-nav rowBC ">
            <div class=" widthPx-60"> </div>
            <h4>刷写包列表</h4>
            <svg-icon  icon-class="guanbi"  class="font-sizePx24  text-center widthPx-60" @click="modalIsShow=false"/>
          </div>
          <!--搜索查询-->
          <div class="rowCC top-nav-container">
            <van-field  class="widthPC-70 search-input" v-model="searchFormMixin.fileName" placeholder="刷写包名字" />
            <svg-icon  icon-class="searchIcon"  class="ml-2 font-sizePx24" @click="initPageLoad"/>
          </div>
          <van-pull-refresh  class="freshScroll" v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
              <div class="flashApproval-list">
                <div
                    v-for="(item,index) in listData" :key="index"
                    class="flashApproval-list-item rowBC">
                  <div>
                    <h4 class="text-wrap-force">{{item.fileName}}</h4>
                    <h5 class="mt-1">{{item.ctime}}</h5>
                  </div>
                  <van-button size="small" type="primary" @click="sxbChoose(item)">选择</van-button>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex'
// import validMixins from '@/mixins/validMixins.js'
import { ImagePreview } from "vant"; // 引入Vant图片预览组件
export default {
  name: 'WritingApplicationDetail',
  components: {
    // TablesGZCJ,
  },
  // mixins: [validMixins],
  props: {
    // treeData: Array,
  },
  // mixins: [validMixins],
  data() {
    return {
      minDate: new Date(),
      packingValue: "",
      showPicker:false,
      checked:false,
      text:"",
      chooseDateShow:false,
      columns: [
        {value:0,label:"待审核"},
        {value:1,label:"审核通过"},
        {value:-1,label:"拒绝"},
      ],
      columnsMap:{
        "0":"待审核",
        "1":"审核通过",
        "-1":"拒绝",
      },
      defaultChooseIndex:"",
      imageFileList:[],
      vehicleIniApplyData:{},
      /*请求*/
      showDatePicker:false,
      modalIsShow:false,
      isSHApprove:false,
      //下拉刷新
      loading:false,
      finished:false,
      refreshing:false,
      page: 0,
      pageSize: 20,
      listData:[],
    }
  },
  computed: {
    // ...mapState('user', ['token', 'userInfo'])
  },
  watch: {
    // 'cmAddForm.enginePlatform': function(val) {
    //   console.log('enginePlatformval', val)
    //   if (val) {
    //     this.emissionOptionReq()
    //   }
    // }
  },
  created() {

  },
  mounted() {
    console.log(this.queryParamsMixin.params);
    this.initPageLoadData();
  },
  methods: {
    getLargeImg(index) {
      ImagePreview({
        images: this.vehicleIniApplyData.photos, // 预览图片的那个数组
        showIndex: true,
        loop: false,
        startPosition: index, // 指明预览第几张图
      })
    },
    sxbChoose(item){
      console.log("选择了刷写包", item);
      this.vehicleIniApplyData.eolFileId=item.id
      this.vehicleIniApplyData.eolFileName=item.fileName
      this.modalIsShow=false;
    },
    //选择刷写包
    chooseSxB(){
      this.modalIsShow=true;
      this.initPageLoad();
    },

    /*下拉相关*/
    initPageLoad(){
      this.finished = false
      this.page = 0
      this.pageSize = 20
      this.listData = []
      this.getListData();
    },
    onLoad() {
      console.log("下面");
      this.refreshing=false;
      this.page = this.page + 1
      if (!this.finished) { // 为true则刷新数据
        this.getListData()
      }
    },
    onRefresh() {
      console.log("上面");
      this.initPageLoad()
    },


    initPageLoadData(){
      this.getVehicleIniApplyReq();
    },
    onChooseDateConfirm(value){
      this.vehicleIniApplyData.approvalValidDate = this.$momentMini(value).format('YYYY-MM-DD HH:mm:ss')
      this.chooseDateShow=false
    },
    onConfirm(item){
      this.packingValue=item.label
      this.vehicleIniApplyData.approvalStatus=item.value
      this.showPicker=false
    },
    //确定按钮点击了
    btnConfirm(){
      this.approvalStatusVehicleIniApplySub();
    },

    /*数据请求*/
    getVehicleIniApplyReq() {
      const data = {
        id:this.queryParamsMixin.params.id
      }
      this.$axiosReq({
        url: 'eolorder/eolInfo',
        data,method: 'get', bfLoading: true,isParams:true,
      }).then(res => {
        this.vehicleIniApplyData=JSON.parse(JSON.stringify(res.data))
        //eol状态回显
        this.packingValue=this.columnsMap[this.vehicleIniApplyData.approvalStatus]
        //默认选中索引
        this.defaultChooseIndex=this.columns.findIndex(item => item.value ===this.vehicleIniApplyData.approvalStatus )
        //状态是否审核通过
        this.isSHApprove=this.vehicleIniApplyData.approvalStatus===1
      })
    },
    //提交eol
    //校验
    validSubData(){
      return new Promise((resolve,reject)=>{
        //刷写次数>1
        // if(!(this.vehicleIniApplyData.approvalRewriteTimes>=1)){
        //   this.vantToastNoneMixin("刷写次数要大于等于1")
        //   reject();
        // }
        //判断审批状态是否修改了
        console.log("this.vehicleIniApplyData",this.vehicleIniApplyData.approvalStatus);
        if(this.vehicleIniApplyData.approvalStatus===0){
          this.vantToastNoneMixin("请先修改审核状态")
          reject();
        }
        //刷写包
        if(!this.vehicleIniApplyData.eolFileId){
          this.vantToastNoneMixin("请先选择刷写包")
          reject();
        }
        //拒绝原因
        if(this.vehicleIniApplyData.approvalStatus===-1&&!(this.vehicleIniApplyData.refuseReason)){
          this.vantToastNoneMixin("审核状态选择了拒绝，请填写拒绝原因")
          reject();
        }
        //有效期
        if(!this.vehicleIniApplyData.approvalValidDate){
          this.vantToastNoneMixin("有效期为空")
          reject();
        }
        resolve()
      })
    },
    async approvalStatusVehicleIniApplySub() {
      await this.validSubData();
      //vehicleIniApply
      let vehicleIniApply={}
      vehicleIniApply.eolFileId=this.vehicleIniApplyData.eolFileId
      vehicleIniApply.id=this.vehicleIniApplyData.id
      vehicleIniApply.approvalStatus=this.vehicleIniApplyData.approvalStatus
      vehicleIniApply.approvalValidDate=this.vehicleIniApplyData.approvalValidDate
      vehicleIniApply.approvalRewriteTimes=this.vehicleIniApplyData.approvalRewriteTimes||1
      vehicleIniApply.refuseReason=this.vehicleIniApplyData.refuseReason
      vehicleIniApply.approverUserName=this.vehicleIniApplyData.applicantUserName
      const data = {
        param:JSON.stringify(vehicleIniApply),
      }
      // console.log("提交的数据data", data);
      this.$axiosReq({
        url: 'eolorder/update',
        data,method: 'post', bfLoading: true,isParams: true,
      }).then(res => {
        this.vantToastMixin("数据保存成功")
        this.sleepMixin(500).then(()=>{
          this.routerBackMixin()
        })
      })
    },
    //获取刷新包列表
    getListData() {
      const data = {
        ecuModel:this.vehicleIniApplyData.ecuModel,
        page:this.page,
        size:this.pageSize,
        fileName:this.searchFormMixin.fileName
      }
      this.$axiosReq({
        url: 'eolfile/list',
        data,method: 'get', bfLoading: true,isParams:true,
      }).then(res => {
        if (res.data&&(res.data.length<this.pageSize)) { // 少于10条数据时将下拉请求关闭
          this.finished = true
        }
        this.listData = this.listData.concat(res.data)
        this.refreshing=false
        this.loading=false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  #WritingApplicationDetail {
    background-color: #F0EFF4;
    padding: 0 12px;
  }
  /*顶部*/
  .WritingApplicationDetail-top{
    .top-item{
      padding: 13px 0;
      border-bottom: 1px solid #ddd;
      width: 100%;
      h4{
        width: 140px;
      }
    }
  }
  /*图片显示*/
  .image-container{
    .tp-container{
      width: 100px;
      height: 100px;
    }
  }

  /*刷新modal*/
  .vanOverlayModal{
    background-color: #fff;
    width: 90vw;
    border-radius: 8px;
    //顶部标题
    .top-nav{
       height: 50px;
    }
     .top-nav-container{

     }
  }
  .freshScroll{
    width: 90vw;
    height: 75vh;
    overflow-y: auto;
    padding:10px;
  }
  .flashApproval-list{
    .flashApproval-list-item{
      width: 100%;
      /*height: 60px;*/
      padding: 6px 0;
      border-bottom: 1px solid #ddd;
      h4 {
        max-width: 70vw;
        line-height: 20px;
        color: #333;
        font-size: 14px;
      }
      h5{
        font-size: 14px;
        color: #666;
      }
    }
    .flashApproval-list-item:first-child{
      border-top: 1px solid #ddd;
    }
  }

  /*输入item的颜色*/
  .inputItem{
    min-height: 45px;
    border-bottom: 1px solid #ddd;
  }

  //搜索框的样式
  .search-input{
    border-radius: 6px;
  }

</style>

